<template>
	<view>
		<view class="searchbar">
			<uni-search-bar @confirm="search" :focus="false" v-model="searchValue" @blur="blur" @focus="focus"
				@input="input" @cancel="cancel" @change="change" @clear="clear"></uni-search-bar>
		</view>
		<text style="color: #94bcff;font-size: 12px;width: 100%;padding-left: 5%;">
			共有 {{ cardlist.length }} 记录</text>

		<view class="container">
			<uni-card v-for="(card, index) in cardlist" :key="index" :title="card.name? card.name: card.factory "
				:extra="card.post ? card.post : card.name ">
				<text>{{card.text}}</text>
				<view class="card-actions">
					<view class="card-actions-item" @click="actions1Click(card.text)">
						<uni-icons type="paperplane" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">复制</text>
					</view>
					<!-- <view class="card-actions-item" @click="actions4Click(card.title)">
						<uni-icons type="clear" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">删除</text>
					</view> -->
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				cardlist: '',
				filteredCards: ''
			}
		},
		onShow() {
			this.title = uni.getStorageSync('record');
			console.log("历史记录" + this.title);
			if (this.title == 'word') {
				//个人
				this.api.seletextren().then(res => {
					console.log(res)
					this.cardlist = res.data
				})
			} else {
				this.api.seletextsi().then(res => {
					console.log(res)
					this.cardlist = res.data
				})
			}
		},
		methods: {
			actions1Click(title) {
				// console.log("复制" + title);
				uni.setClipboardData({
					data: title,
					success() {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			actions4Click(title) {
				console.log("删除" + title);

			},
			search(res) {
				this.filteredCards = this.cardlist
				// uni.showToast({
				// 	title: '搜索：' + res.value,
				// 	icon: 'none'
				// })
			},
			input(res) {
				console.log('----input:', res)
				this.cardlist = this.filteredCards
				this.cardlist = this.cardlist.filter(card => {
					return (card?.name?.includes(res) || card?.facotry?.includes(res) || card?.psot?.includes(res))
				})
			},
			clear(res) {
				this.cardlist = this.filteredCards
				// uni.showToast({
				// 	title: 'clear事件，清除值为：' + res.value,
				// 	icon: 'none'
				// })
			},
			blur(res) {
				// uni.showToast({
				// 	title: 'blur事件，输入值为：' + res.value,
				// 	icon: 'none'
				// })
				//点击搜索之外的地方
			},
			focus(e) {
				//保存全部数据 ，点击搜索框
				this.filteredCards = this.cardlist
				// uni.showToast({
				// 	title: 'focus事件，输出值为：' + e.value,
				// 	icon: 'none'
				// })
			},
			cancel(res) {
				this.cardlist = this.filteredCards
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	//卡片固定样式
	.container {
		overflow: auto;
		// /* 控制内容溢出时显示滚动条 */
		// margin-top: 90px;
		/* 调整合适的距离 */
		padding-bottom: 30px;

		/* 添加底部间距，防止内容紧贴底部 */
		.card-actions {
			display: flex;
			justify-content: space-between;
			padding: 0 2%;
		}

		.card-actions-item {
			display: flex;
			align-items: center;
			padding-top: 10px;

			.card-actions-item-text {
				padding-left: 5px;
			}
		}
	}
</style>